<section [formGroup]="geoActionConfigForm" fxLayout="column">
  <mat-form-field class="mat-block">
    <mat-label translate>tb.rulenode.latitude-key-name</mat-label>
    <input matInput formControlName="latitudeKeyName" required>
    <mat-error *ngIf="geoActionConfigForm.get('latitudeKeyName').hasError('required')">
      {{ 'tb.rulenode.latitude-key-name-required' | translate }}
    </mat-error>
  </mat-form-field>
  <mat-form-field class="mat-block">
    <mat-label translate>tb.rulenode.longitude-key-name</mat-label>
    <input matInput formControlName="longitudeKeyName" required>
    <mat-error *ngIf="geoActionConfigForm.get('longitudeKeyName').hasError('required')">
      {{ 'tb.rulenode.longitude-key-name-required' | translate }}
    </mat-error>
  </mat-form-field>
  <mat-checkbox fxFlex formControlName="fetchPerimeterInfoFromMessageMetadata" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.fetch-perimeter-info-from-message-metadata' | translate }}
  </mat-checkbox>
  <div fxLayout="row" *ngIf="!geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>tb.rulenode.perimeter-type</mat-label>
      <mat-select formControlName="perimeterType" required>
        <mat-option *ngFor="let type of perimeterTypes" [value]="type">
          {{ perimeterTypeTranslationMap.get(type) | translate }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div fxLayout="column"
       *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.CIRCLE &&
       !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
    <div fxLayout="row" fxLayoutGap="8px">
      <mat-form-field fxFlex>
        <mat-label translate>tb.rulenode.circle-center-latitude</mat-label>
        <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>
        <mat-error *ngIf="geoActionConfigForm.get('centerLatitude').hasError('required')">
          {{ 'tb.rulenode.circle-center-latitude-required' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex>
        <mat-label translate>tb.rulenode.circle-center-longitude</mat-label>
        <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>
        <mat-error *ngIf="geoActionConfigForm.get('centerLongitude').hasError('required')">
          {{ 'tb.rulenode.circle-center-longitude-required' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div fxLayout="row" fxLayoutGap="8px">
      <mat-form-field fxFlex>
        <mat-label translate>tb.rulenode.range</mat-label>
        <input type="number" min="0" step="0.1" matInput formControlName="range" required>
        <mat-error *ngIf="geoActionConfigForm.get('range').hasError('required')">
          {{ 'tb.rulenode.range-required' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex>
        <mat-label translate>tb.rulenode.range-units</mat-label>
        <mat-select formControlName="rangeUnit" required>
          <mat-option *ngFor="let type of rangeUnits" [value]="type">
            {{ rangeUnitTranslationMap.get(type) | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
  <div fxLayout="column" *ngIf="geoActionConfigForm.get('perimeterType').value === perimeterType.POLYGON &&
                             !geoActionConfigForm.get('fetchPerimeterInfoFromMessageMetadata').value">
    <mat-form-field class="mat-block" hintLabel="{{'tb.rulenode.polygon-definition-hint' | translate}}" style="padding-bottom: 16px;">
      <mat-label translate>tb.rulenode.polygon-definition</mat-label>
      <input matInput formControlName="polygonsDefinition" required>
      <mat-error *ngIf="geoActionConfigForm.get('polygonsDefinition').hasError('required')">
        {{ 'tb.rulenode.polygon-definition-required' | translate }}
      </mat-error>
    </mat-form-field>
  </div>
  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>tb.rulenode.min-inside-duration</mat-label>
      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>
      <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('required')">
        {{ 'tb.rulenode.min-inside-duration-value-required' | translate }}
      </mat-error>
      <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('min')">
        {{ 'tb.rulenode.time-value-range' | translate }}
      </mat-error>
      <mat-error *ngIf="geoActionConfigForm.get('minInsideDuration').hasError('max')">
        {{ 'tb.rulenode.time-value-range' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>
      <mat-select formControlName="minInsideDurationTimeUnit" required>
        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>tb.rulenode.min-outside-duration</mat-label>
      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>
      <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('required')">
        {{ 'tb.rulenode.min-outside-duration-value-required' | translate }}
      </mat-error>
      <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('min')">
        {{ 'tb.rulenode.time-value-range' | translate }}
      </mat-error>
      <mat-error *ngIf="geoActionConfigForm.get('minOutsideDuration').hasError('max')">
        {{ 'tb.rulenode.time-value-range' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex class="mat-block">
      <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>
      <mat-select formControlName="minOutsideDurationTimeUnit" required>
        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</section>
